<script lang="ts" setup>
import PageTable from '@/components/q-table/component/page-table.vue';
import { usePageTable, useUpset } from '@/hooks';
import { EditTagParams, ITag, api } from '@/service';
import { NButton } from 'naive-ui';

const tableRow = ref<ITag>();

const { dialog, message } = useFeedback(['dialog', 'message']);

const { pageTableRef, columns, operations, tableRequest, refreshTable, getTableInstance } = usePageTable<ITag>({
	api: api.tag.getPaginationTag,
	columns: [
		{ field: 'name', title: '标签名称', searchFormItem: { type: 'n-input' } },
		{ field: 'tagid', title: '标签标识', searchFormItem: { type: 'n-input' } },
		{ field: 'description', title: '标签描述' },
		{ field: 'create_date', title: '创建时间', cellRender: { name: 'Date' } },
	],
	operations: [
		{
			label: '编辑',
			key: 'edit',
			show: (row) => row.tagid !== 'admin',
		},
		{
			label: '删除',
			key: 'delete',
			type: 'error',
			show: (row) => row.tagid !== 'admin',
		},
	],
});

const { formItems, handleAdd, handleEdit, setFormItem } = useUpset<EditTagParams, string>({
	formItems: [
		{
			field: 'tagid',
			title: '标签标识',
			type: 'n-input',
			validate: [{ required: true, message: '请输入标签标识' }],
		},
		{
			field: 'name',
			title: '标签名称',
			type: 'n-input',
			validate: [{ required: true, message: '请输入标签名称' }],
		},
		{ field: 'description', title: '标签描述', type: 'n-input', props: { type: 'textarea' } },
	],
	api: (data) => (tableRow.value ? api.tag.updateTag({ ...data, _id: tableRow.value._id }) : api.tag.addTag(data)),
	success: () => {
		refreshTable();
	},
	beforeOpen: async () => {
		api.permission.getAllPermission().then((res) => {
			setFormItem({
				field: 'permission',
				value: {
					type: 'n-select',
					options: res.map((item) => ({
						value: item.permission_id,
						label: item.permission_name,
					})),
				},
			});
		});
	},
	title: '标签',
	modalOptions: {
		class: 'w-[400px]',
	},
});

const handleAddTag = () => {
	handleAdd({});
};

const handleEditTag = (row: ITag) => {
	tableRow.value = row;

	handleEdit({
		initialData: row,
	});
};

const handleDeleteTag = (row: ITag) => {
	const deleteDialog = dialog.warning({
		title: '删除标签',
		content: '确定删除该标签吗？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: async () => {
			try {
				deleteDialog.loading = true;
				const res = await api.tag.deleteTag(row._id);
				message.success('删除成功');
				getTableInstance()?.remove(row);
			} catch (error) {
				message.error('删除失败');
			} finally {
				deleteDialog.loading = false;
			}
		},
	});
};

const handleSelect = (params: { key: string; row: ITag }) => {
	switch (params.key) {
		case 'add':
			handleAddTag();
			break;
		case 'edit':
			handleEditTag(params.row);
			break;
		case 'delete':
			handleDeleteTag(params.row);
			break;
	}
};

const handleRequested = () => {
	pageTableRef.value?.getTableInstance()?.setAllTreeExpand(true);
};
</script>
<template>
	<page-wrap>
		<page-table
			ref="pageTableRef"
			:columns="columns"
			:operations="operations"
			:request="tableRequest"
			@requested="handleRequested"
			@operation-select="handleSelect"
		>
			<template #toolbarButtons>
				<div class="space-x-2">
					<n-button type="primary" @click="() => handleAddTag()">新增标签</n-button>
				</div>
			</template>
		</page-table>
	</page-wrap>
</template>
